<template>
  <div class="aa">
  <div class="a"></div>
    <div class="b"></div>
  </div>
</template>


<script setup>
import {onActivated, onDeactivated, onMounted} from "vue";

onMounted(async () => {
  console.log('find')
});
onActivated(() => {
  console.log('find    activated**');
})
onDeactivated(() => {
  console.log('find    onDeactivated')
})
</script>


<style scoped lang="scss">
.aa{
  height: 100vh;
  overflow-y: scroll;
}
.a{

  width: 100vw;
  height: 150vh;
  background: red;
}
.b{
  width: 100vw;
  height: 150vh;
  background: green;
}
</style>
